<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org" style="height: 100%">
<html>
<head>
    <meta charset="utf-8">
    <title>首页二</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../layuimini/css/public.css" media="all">
</head>
<body >

<!--员工数量变动-->
<input type="hidden" id="empCount1" th:value="${ss.empmapcount[0]}">
<input type="hidden" id="empCount2" th:value="${ss.empmapcount[1]}">
<input type="hidden" id="empCount3" th:value="${ss.empmapcount[2]}">
<input type="hidden" id="empCount4" th:value="${ss.empmapcount[3]}">
<input type="hidden" id="empCount5" th:value="${ss.empmapcount[4]}">
<input type="hidden" id="empCount6" th:value="${ss.empmapcount[5]}">
<!--工资发放变动-->
<input type="hidden" id="WagCount1" th:value="${ss.wagescount[0]}">
<input type="hidden" id="WagCount2" th:value="${ss.wagescount[1]}">
<input type="hidden" id="WagCount3" th:value="${ss.wagescount[2]}">
<input type="hidden" id="WagCount4" th:value="${ss.wagescount[3]}">
<input type="hidden" id="WagCount5" th:value="${ss.wagescount[4]}">
<input type="hidden" id="WagCount6" th:value="${ss.wagescount[5]}">
<!--面试人数变动-->
<input type="hidden" id="ViewCount1" th:value="${ss.viewcount[0]}">
<input type="hidden" id="ViewCount2" th:value="${ss.viewcount[1]}">
<input type="hidden" id="ViewCount3" th:value="${ss.viewcount[2]}">
<input type="hidden" id="ViewCount4" th:value="${ss.viewcount[3]}">
<input type="hidden" id="ViewCount5" th:value="${ss.viewcount[4]}">
<input type="hidden" id="ViewCount6" th:value="${ss.viewcount[5]}">

<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10" th:each="d:${ss}">
                                        <div class="layui-col-xs3">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-blue">实时</span>
                                                        <h5>部门数量</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" th:text="${d.departcount}"></h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs3">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-cyan">实时</span>
                                                        <h5>总员工数量</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" th:text="${d.empinfocount}"></h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs3">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">实时</span>
                                                        <h5>正式员工</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" th:text="${d.formalcount}"></h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs3">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-green">实时</span>
                                                        <h5>非正式员工</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" th:text="${d.isformalcount}"></h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
                            <div class="layui-card-body" style="height: 500px">
                                <div id="container" style="height: 100%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="../layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
<script type="text/javascript">
    var $ = layui.jquery;
    var form = layui.form;
    var table = layui.table;

    let empCount1 = $("#empCount1").val();
    let empCount2 = $("#empCount2").val();
    let empCount3 = $("#empCount3").val();
    let empCount4 = $("#empCount4").val();
    let empCount5 = $("#empCount5").val();
    let empCount6 = $("#empCount6").val();

    let WagCount1 = $("#WagCount1").val();
    let WagCount2 = $("#WagCount2").val();
    let WagCount3 = $("#WagCount3").val();
    let WagCount4 = $("#WagCount4").val();
    let WagCount5 = $("#WagCount5").val();
    let WagCount6 = $("#WagCount6").val();

    let ViewCount1 = $("#ViewCount1").val();
    let ViewCount2 = $("#ViewCount2").val();
    let ViewCount3 = $("#ViewCount3").val();
    let ViewCount4 = $("#ViewCount4").val();
    let ViewCount5 = $("#ViewCount5").val();
    let ViewCount6 = $("#ViewCount6").val();

    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
        title: {
            text: '走势图'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['员工总数', '工资的总额', '面试的人数']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '员工总数',
                type: 'line',
                data:[empCount1,empCount2,empCount3,empCount4,empCount5,empCount6]
            },
            {
                name: '工资的总额',
                type: 'line',
                data: [WagCount1,WagCount2,WagCount3,WagCount4,WagCount5,WagCount6]
            },
            {
                name: '面试的人数',
                type: 'line',
                data: [ViewCount1,ViewCount2,ViewCount3,ViewCount4,ViewCount5,ViewCount6]
            }
        ]
    };
    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>